<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日一笑</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            margin: 0 auto;
            border: 2px solid green;
            text-align: center;
        }
        h2{
            font-size: 20px;
            color: red;
            height: 20px;
        }
        button{
            display: block;
            margin: 0 auto;
            height: 35px;
            width: 70px;
            line-height: 28px;
            border: 1px solid red;
            background-color: green;
            color: #fff;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div>
        <h2>每日一笑</h2>
        <button>点我</button>
        <span>
        </span>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function(){
            function fn(){
                $.ajax({
                    url:'https://autumnfish.cn/api/joke',
                    success:function(getdata){
                       // console.log(getdata);
                       // let res =getdata
                       $('span').html(getdata)
                    }
                })
            }
            fn()
            $('button').on('click',function(){
                fn()
            })
        })
    </script>
</body>
   
</html>